<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        mycanvas {
            border: 3px solid tomato;
        }
    </style>

</head>

<body>
    <canvas id="mycanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('mycanvas')
        const ctx = canvas.getContext('2d')
        console.log(ctx);
        ctx.translate(250, 250)
        ctx.beginPath()
        for (let i = 0; i <= 60; i++) {
            let jiaodu = 6 * i
            let ratateAngle = (Math.PI / 180) * jiaodu
            ctx.restore()
            ctx.save()
            ctx.rotate(ratateAngle)
            ctx.beginPath()
            ctx.strokeStyle = '#999'
            ctx.moveTo(190, 0)
            ctx.lineTo(200, 0)
            ctx.stroke()
            ctx.closePath()
        }
        ctx.beginPath()
        for (let i = 0; i <= 12; i++) {

            let jiaodu = 30 * i
            let ratateAngle = (Math.PI / 180) * jiaodu
            ctx.restore()
            ctx.save()
            ctx.rotate(ratateAngle)
            ctx.beginPath()
            ctx.strokeStyle = '#333'
            ctx.moveTo(180, 0)
            ctx.lineTo(200, 0)
            ctx.stroke()
            ctx.closePath()
        }

        let times = new Date()
        let hh = new Date().getHours() > 12 ? new Date().getHours() - 12 : new Date().getHours()
        let mm = new Date().getMinutes()
        let ss = new Date().getSeconds()
        console.log(hh, mm, ss);

        setInterval(() => {
            let times = new Date()
            let hh = new Date().getHours()
            let mm = new Date().getMinutes()
            let ss = new Date().getSeconds()
            console.log(hh, mm, ss);

            // 清楚上一秒针
            ctx.beginPath()
            ctx.restore()
            ctx.save()
            ctx.rotate((Math.PI / 180) * (270 + (((ss - 1) * 360) / 60)))
            ctx.lineWidth = '5';
            ctx.strokeStyle = '#fff'
            ctx.moveTo(0, 0)
            ctx.lineTo(175, 0)
            ctx.stroke()


             // 清除分针
            ctx.beginPath()
            ctx.restore()
            ctx.save()
            ctx.rotate((Math.PI / 180) * (270 + (((mm-1) * 360) / 60)))
            ctx.lineWidth = '8';
            ctx.strokeStyle = '#fff'
            ctx.moveTo(0, 0)
            ctx.lineTo(135, 0)
            ctx.stroke()

             // 清除时针
            ctx.beginPath()
            ctx.restore()
            ctx.save()
            ctx.rotate((Math.PI / 180) * (270 + (((hh-1) * 360) / 12)))
            ctx.lineWidth = '11'
            ctx.moveTo(0, 0)
            ctx.lineTo(105, 0)
            ctx.strokeStyle = '#fff'
            ctx.stroke()








            // 时针
            ctx.beginPath()
            ctx.restore()
            ctx.save()
            ctx.rotate((Math.PI / 180) * (270 + ((hh * 360) / 12)))
            ctx.lineWidth = '9'
            ctx.moveTo(0, 0)
            ctx.lineTo(100, 0)
            ctx.strokeStyle = 'tomato'
            ctx.stroke()

            // 分针
            ctx.beginPath()
            ctx.restore()
            ctx.save()
            ctx.rotate((Math.PI / 180) * (270 + ((mm * 360) / 60)))
            ctx.lineWidth = '6';
            ctx.strokeStyle = 'gold'
            ctx.moveTo(0, 0)
            ctx.lineTo(130, 0)
            ctx.stroke()

            // 秒针
            ctx.beginPath()
            ctx.restore()
            ctx.save()
            ctx.rotate((Math.PI / 180) * (270 + ((ss * 360) / 60)))
            ctx.lineWidth = '3';
            ctx.strokeStyle = 'skyblue'
            ctx.moveTo(0, 0)
            ctx.lineTo(170, 0)
            ctx.stroke()

        }, 1000)


        // // 时针
        // ctx.beginPath()
        // ctx.rotate((Math.PI / 180) * (270 + ((hh * 360) / 12)))
        // ctx.lineWidth = '9'
        // ctx.moveTo(0, 0)
        // ctx.lineTo(100, 0)
        // ctx.stroke()

        // // 分针
        // ctx.beginPath()
        // ctx.restore()
        // ctx.save()
        // ctx.rotate((Math.PI / 180) * (270 + ((mm * 360) / 60)))
        // ctx.lineWidth = '6';
        // ctx.moveTo(0, 0)
        // ctx.lineTo(130, 0)
        // ctx.stroke()

        // // 秒针
        // ctx.beginPath()
        // ctx.restore()
        // ctx.save()
        // ctx.rotate((Math.PI / 180) * (270 + ((ss * 360) / 60)))
        // ctx.lineWidth = '3';
        // ctx.moveTo(0, 0)
        // ctx.lineTo(170, 0)
        // ctx.stroke()
    </script>
</body>

</html>